<template>
	<view class="overflow-h">
		<!-- #ifdef H5 -->
		<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/login_bg.png" class="login-bg">
		</image>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<image src="https://gd-hbimg.huaban.com/583cbd8d4c5a86fde133a89729046bc8e08cb1b437853e-vE9VwZ" class="login-bg">
		</image>
		<!-- #endif -->
		<view class="title-box">
			<view>
				<view class="fw-900" style="font-size: 66rpx;transform: skewX(-15deg);">
					奇妙野
				</view>
				<view class="fw-900">一起享受户外美好时光！</view>
			</view>
		</view>
		<view class="ping-40 pb-30">
			<!-- #ifdef MP-WEIXIN -->
			<view @click="login_before"
				class="flex-dir-row ali-item-cen col-f br-10 w-100 fs-32 bac-col-00b h-90 lh-90 flex-center">
				<view class="mr-10 fs-50"></view>
				<view>微信登录</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="flex-dir-row ali-item-cen  br-20 w-100 fs-32 bac-col-fa ping-0-30 flex-center"
				style="height: 80rpx;line-height: 80rpx;">
				<view class="iconfont ic-yonghuming fs-40 col-0 mr-30"></view>
				<input class="flex-1 fs-26" :focus="focusUsername" @blur="focusUsername = false" v-model="username"
					placeholder="请输入手机号/用户名/邮箱" placeholder-class="input-placeholder" />
			</view>
			<view class="flex-dir-row mt-30 ali-item-cen mb-30 br-20 w-100 fs-32 bac-col-fa ping-0-30 flex-center"
				style="height: 80rpx;line-height: 80rpx;">
				<view class="iconfont ic-mima fs-40 col-0 mr-30"></view>
				<input class="flex-1 fs-26" :focus="focusPassword" @blur="focusPassword = false" v-model="password"
					placeholder="请输入密码" placeholder-class="input-placeholder" type="password" trim="all" />
			</view>
			<uni-captcha v-if="needCaptcha" focus ref="captcha" scene="login-by-pwd" v-model="captcha" />
			<button class="bac-col-00b mt-30 col-f" style="height: 80rpx;line-height: 80rpx;"
				@click="pwdLogin">登录</button>
			<view @click="$NavigateTo('/uni_modules/uni-id-pages/pages/register/register')"
				class="fs-24  flex-dir-row mt-30" style="justify-content: center;">
				<view class="col-b1">还没有账号？</view>
				<view>去注册</view>
			</view>
			<!-- #endif -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="ping-40 pt-0">
			<button open-type="getPhoneNumber" @getphonenumber="quickLogin"
				class="fs-32 br-10 col-54 h-90 lh-90">授权手机号登录</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import config from '@/uni_modules/uni-id-pages/config.js'
	// #ifdef H5
	// 用于账号密码登录
	import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
	const uniIdCo = uniCloud.importObject("uni-id-co", {
		errorOptions: {
			type: 'toast'
		}
	})
	// #endif
	export default {
		// #ifdef H5
		mixins: [mixin],
		// #endif
		data() {
			return {
				type: 'weixin',
				password: "",
				username: "",
				captcha: "",
				needCaptcha: false,
				focusUsername: false,
				focusPassword: false,
			}
		},
		methods: {
			login_before() {
				// #ifdef MP-WEIXIN
				this.$Loading('登录中')
				uni.login({
					"provider": this.type,
					"onlyAuthorize": true,
					success: async e => {
						this.login({
							code: e.code
						}, this.type)
					},
					fail: async (err) => {
						console.log(err);
						uni.hideLoading();
					}
				})
				// #endif
				// // #ifdef H5
				// const baseUrl = process.env.BASE_URL
				// let redirectUrl = location.protocol +
				// 	'//' +
				// 	location.host +
				// 	baseUrl.replace(/\/$/, '') +
				// 	(window.location.href.includes('#') ? '/#' : '') +
				// 	'/uni_modules/uni-id-pages/pages/login/login-withoutpwd?is_weixin_redirect=true&type=weixin'

				// // console.log('redirectUrl----',redirectUrl);
				// let ua = window.navigator.userAgent.toLowerCase();
				// if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				// 	// console.log('在微信公众号内');
				// 	return window.open(`https://open.weixin.qq.com/connect/oauth2/authorize?
				// 							appid=${config.appid.weixin.h5}
				// 							&redirect_uri=${encodeURIComponent(redirectUrl)}
				// 							&response_type=code
				// 							&scope=snsapi_userinfo
				// 							&state=STATE&connect_redirect=1#wechat_redirect`);

				// } else {
				// 	// console.log('非微信公众号内');
				// 	return location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${config.appid.weixin.web}
				// 								&redirect_uri=${encodeURIComponent(redirectUrl)}
				// 								&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`
				// }
				// // #endif
			},
			quickLogin(e) {
				this.$Loading('登录中')
				this.type = "weixinMobile";
				let options = {};
				if (e.detail?.code) {
					options.phoneNumberCode = e.detail.code
				}
				if (!e.detail?.code) return
				this.login({
					phoneCode: options.phoneNumberCode
				}, this.type)
			},
			// 微信登录
			login(params, type) {
				let action = 'loginBy' + type.trim().replace(type[0], type[0].toUpperCase())
				const uniIdCo = uniCloud.importObject("uni-id-co", {
					customUI: true
				})
				uniIdCo[action](params).then(result => {
						this.$Toast('登录成功')
						setTimeout(() => {
							mutations.loginSuccess(result)
						}, 1000)
					})
					.catch(e => {
						uni.showModal({
							content: e.message,
							confirmText: "知道了",
							showCancel: false
						});
					})
					.finally(e => {
						if (type == 'univerify') {
							uni.closeAuthView()
						}
						uni.hideLoading()
					})
			},
			// 密码登录
			pwdLogin() {
				if (!this.username.length) {
					this.focusUsername = true
					return uni.showToast({
						title: '请输入手机号/用户名/邮箱',
						icon: 'none',
						duration: 3000
					});
				}
				if (!this.password.length) {
					this.focusPassword = true
					return uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 3000
					});
				}
				if (this.needCaptcha && this.captcha.length != 4) {
					this.$refs.captcha.getImageCaptcha()
					return uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 3000
					});
				}

				if (this.needAgreements && !this.agree) {
					return this.$refs.agreements.popup(this.pwdLogin)
				}

				let data = {
					"password": this.password,
					"captcha": this.captcha
				}

				if (/^1\d{10}$/.test(this.username)) {
					data.mobile = this.username
				} else if (/@/.test(this.username)) {
					data.email = this.username
				} else {
					data.username = this.username
				}

				uniIdCo.login(data).then(e => {
					this.loginSuccess(e)
				}).catch(e => {
					if (e.errCode == 'uni-id-captcha-required') {
						this.needCaptcha = true
					} else if (this.needCaptcha) {
						//登录失败，自动重新获取验证码
						this.$refs.captcha.getImageCaptcha()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.title-box {
		margin-top: 700rpx;
		padding: 40rpx;
	}

	@keyframes rotateAnimation {
		0% {
			transform: rotate(0deg);
			/* 从 0 度开始 */
		}

		25% {
			transform: rotate(10deg);
			/* 从 0 度开始 */
		}

		50% {
			transform: rotate(0deg);
			/* 旋转 360 度 */
		}

		75% {
			transform: rotate(-10deg);
			/* 旋转 360 度 */
		}

		100% {
			transform: rotate(0deg);
			/* 旋转 360 度 */
		}
	}

	.login-bg {
		width: 1200rpx;
		height: 1200rpx;
		position: fixed;
		top: -365rpx;
		right: -420rpx;
		z-index: -1;
		animation: rotateAnimation 50s linear infinite;
		/* 应用旋转动画 */
	}

	.input-placeholder {
		color: #c0c0c0;
	}
</style>